<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>OSS头像上传</title>
    <!-- 外链引入 -->
    <link rel="stylesheet" href="https://fastly.jsdelivr.net/npm/vant@3/lib/index.css" />
    <script src="https://fastly.jsdelivr.net/npm/vue@3"></script>
    <script src="https://fastly.jsdelivr.net/npm/vant@3/lib/vant.min.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <!-- 头像及文字样式 -->
    <style>
        .box {
            margin-top: 15px;
            display: flex;
            justify-content: center;
        }
        .van-image{margin-right: 10px;margin-bottom: 5px;}
    </style>
</head>

<body>
    <div id="app">
        <div class="box">
            <!-- 头像 -->
            <van-uploader v-model="fileList" :after-read="afterRead" :max-count="1" />
        </div>
        <!-- 文字 -->
        <p style="text-align: center;font-size: 14px;">OSS头像上传时间<br><br>{{newTime}}</p>
        <div style="margin-top: 80px;margin-left: 15px;font-size:13px;color:#596064">
            <p>历史头像</p>
            <van-image v-for="(item,index) in imglist" :key="index" width="60px" height="60px" fit="cover" position="center" :src="item" ></van-image>
        </div>
    </div>
</body>

</html>

<script>
    const app = Vue.createApp({
        setup() {
            const { ref, onMounted } = Vue
            // 头像上传时间
            let newTime = ref("")
            // 历史头像列表
            let imglist = ref([])
            // 显示已上传的头像
            let fileList = ref([{ url: 'https://zhao.ink/1.png' }])
            // 点击上传触发的方法
            const afterRead = (file) => {
                //上传状态
                file.status = 'uploading'
                file.message = '上传中...'
                // 构建form信息
                let form = new FormData()
                form.append("pic", file.file)
                axios.patch("http://127.0.0.1:5000", form).then((res) => {
                    newTime.value = res.data.data.time
                    imglist.value = res.data.data.imglist
                    file.status = 'done'
                    vant.Toast('上传成功');
                }).catch(() => {
                    vant.Toast('上传失败,请上传图片');
                })

            };
            // 页面首次加载触发
            onMounted(() => {
                axios.get("http://127.0.0.1:5000").then((res) => {
                    newTime.value = res.data.data.time
                    imglist.value = res.data.data.imglist
                })

            })
            return { afterRead, fileList, newTime,imglist };
        },
    });
    app.use(vant);
    app.mount('#app');
</script>